<script lang="ts">
  import { AppBar} from "@skeletonlabs/skeleton-svelte";
  import { Plus } from "lucide-svelte";
  import { request } from "$lib/utils/request";
  import { getContext } from "svelte";
  import { list_llm_provider, type LlmProviderInfo } from "$lib/api/ai_provider/ai_provider";
  import { remove_llm_provider } from "$lib/api/ai_provider/ai_provider_admin";
  import { userStore } from "$lib/stores/user.svelte";
  import RemoveModal from "$lib/components/modal/RemoveModal.svelte";
  import EditModal from "./EditModal.svelte";
  import type { Store as ToastStore } from "@zag-js/toast";

  const toast: ToastStore = getContext("toast");

  let showAddModal = $state(false);

  let providerList = $state([] as LlmProviderInfo[]);
  let removeProviderInfo = $state(null as null | LlmProviderInfo);
  let updateProviderInfo = $state(null as null | LlmProviderInfo);

  async function loadProviderList() {
    const res = await request(list_llm_provider({}));
    providerList = res.provider_list;
  }

  async function removeProvider() {
    if (removeProviderInfo == null) {
      return;
    }

    await request(
      remove_llm_provider({
        admin_session_id: userStore.adminUserSession,
        provider_id: removeProviderInfo.provider_id,
      })
    );
    toast.create({
      title: "成功",
      description: "删除大模型供应商成功!",
      type: "success",
    });
    removeProviderInfo = null;
    await loadProviderList();
  }

  loadProviderList(); 
</script>

<AppBar
  background="bg-surface-100-900"
  classes="h-[50px] overflow-y-hidden"
  padding="p-2"
>
  {#snippet lead()}
    Llm供应商
  {/snippet}
  {#snippet trail()}
    <button
      type="button"
      class="btn preset-filled-primary-500 gap-1"
      onclick={() => (showAddModal = true)}
    >
      <Plus class="p-0 m-0" />新增
    </button>
  {/snippet}
</AppBar>

<div class="h-[calc(100vh-100px)] overflow-y-auto">
  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>需要ApiKey</th>
          <th>默认Api地址</th>
          <th class="w-[100px]">操作</th>
        </tr>
      </thead>
      <tbody>
        {#each providerList as provider}
          <tr>
            <td>{provider.provider_id}</td>
            <td>{provider.name}</td>
            <td>{provider.need_api_key ? "是" : "否"}</td>
            <td>{provider.default_addr}</td>
            <td class="flex gap-2">
              <button
                type="button"
                class="btn preset-ghost-primary-500 text-primary-500 p-0"
                onclick={() => (updateProviderInfo = provider)}>修改</button
              >
              <button
                type="button"
                class="btn preset-ghost-error-500 text-error-500 p-0"
                onclick={() => (removeProviderInfo = provider)}>删除</button
              >
            </td>
          </tr>
        {/each}
      </tbody>
    </table>
  </div>
</div>

<div class="absolute -left-[10000px]">
    {#if showAddModal}
      <EditModal
        onCancel={() => (showAddModal = false)}
        onOk={() => {
          loadProviderList();
          showAddModal = false;
        }}
      />
    {/if}
    {#if updateProviderInfo != null}
      <EditModal
        provider={updateProviderInfo}
        onCancel={() => (updateProviderInfo = null)}
        onOk={() => {
          loadProviderList();
          updateProviderInfo = null;
        }}
      />
    {/if}
    {#if removeProviderInfo != null}
      <RemoveModal
        title="删除Llm供应商"
        content={`是否删除Llm供应商 ${removeProviderInfo.name} ?`}
        onCancel={() => (removeProviderInfo = null)}
        onOk={() => removeProvider()}
      />
    {/if}
  </div>